<template>
  <div id="TheLogin">
    <van-nav-bar title="登录" left-arrow @click-left="onClickLeft" />
    <van-form class="WithLongin" @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        left-icon="phone-o"
        placeholder="请输入手机号"
        :rules="UserRules.username"
      />
      <van-field
        v-model="password"
        name="password"
        left-icon="jiesuo"
        center
        type="password"
        placeholder="请输入密码"
        :rules="UserRules.password"
      >
        <van-icon
          class="iconfont"
          class-prefix="icon"
          slot="left-icon"
          name="jiesuo"
        />
      </van-field>
      <div class="longinButton">
        <van-button class="longinB" type="info" native-type="submit" block
          >登录</van-button
        >
      </div>
    </van-form>
    <div class="LonginBottom">
      <div class="zhuce">
        <router-link
          style="color: blue; font-size: 13px"
          href=""
          route
          to="/LonginView"
          >还没有账号？请注册</router-link
        >
      </div>
      <div class="Forgot">
        <router-link
          style="color: blue; font-size: 13px"
          href=""
          route
          to="/Forgot"
          >忘记密码？</router-link
        >
      </div>
    </div>
  </div>
</template>

<script>
import { getTheLongin } from "@/api/user";

export default {
  data() {
    return {
      username: "",
      password: "",
      UserRules: {
        username: [
          { required: true, message: "请填写手机号" },
          {
            pattern:
              /^(0|86|17951)?(13[0-9]|15[0123456789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: "请输入正确手机号",
          },
        ],
        password: [
          { required: true, message: "请填写密码" },
          {
            pattern: /^\w{6,12}$/,
            message: "密码格式错误",
          },
        ],
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.replace("/My");
    },
    onSubmit(val) {
      // console.log("submit", val);
      getTheLongin(val).then((res) => {
        // console.log(res);
        //判断登录
        if (res.code == 0) {
          //登陆成功储存用户信息
          let { userInfo, token, uid, tokenExpired } = res;

          //存储到本地
          localStorage.setItem("token", token);
          localStorage.setItem("tokenExpired", tokenExpired);
          localStorage.setItem("userInfo", JSON.stringify(userInfo));
          // console.log(userInfo)
          this.$store.dispatch("getUserInfo", token);

          //存储到vuex
          // this.$store.commit("Myinfo", ["token", token]);
          // this.$store.commit("Myinfo", ["uid", uid]);
          // this.$store.commit("Myinfo", ["userInfo", userInfo]);
          // this.$store.commit("Myinfo", ["ifLongin", true]);

          setTimeout(() => {
            this.$router.replace("/ToLongin");
          }, 0);
          setTimeout((v) => {
            this.$toast("登录成功");
            this.$router.replace("/My");
          }, 1000);
        } else {
          this.$toast(res.msg || "登录失败");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#longin {
  height: 177.8vw;
  background-color: #f7f8fa;
}
::v-deep .longinB {
  margin-top: 30px;
  margin-left: 20px;
  width: 330px;
  background-color: #8b69a9;
  border: #8b69a9;
  color: #fff;
  border-radius: 1px;
}
.LonginBottom {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  .zhuce {
    margin-left: 10px;
  }
  .Forgot {
    margin-right: 10px;
  }
}
</style>